<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<center>
		<table>
			<tr>
				<td>请输入你要查询的城市:
				<input type="text" id="city">
				<button>查询</button></td>
			</tr>
			<tr>
				<td><div id="container" style="min-width:400px;height:400px"></div></td>
			    
			</tr>
			<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		</table>
	</center>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	$("button").click(function(){
		var city = $("#city").val();
		$.post("weather.php",{city:city},function(res){
			var week = "";
			var temp_high="[";
			var temp_low="[";

			$.each(res,function(i,v){
				week += ","+v.week;
				temp_low  += v.temp_low+",";
				temp_high += v.temp_high+",";

			})
			week = week.substr(1);
			week = week.split(","); //split() 方法用于把一个字符串分割成字符串数组。
			temp_high+="]";
			temp_low+="]";
			console.log(temp_high);

		    var chart = Highcharts.chart('container', {
		    chart: {
		        type: 'line'
		    },
		    title: {
		        text: '一周最高低气温'
		    },
		    subtitle: {
		        text: '数据来源: liupeng.com'
		    },
		    xAxis: {
		        categories: week
		    },
		    yAxis: {
		        title: {
		            text: '气温 (°C)'
		        }
		    },
		    plotOptions: {
		        line: {
		            dataLabels: {
		                // 开启数据标签
		                enabled: true          
		            },
		            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
		            enableMouseTracking: false
		        }
		    },
		    series: [{
		        name: '最高温',
		        data: eval(temp_high),
		    }, {
		        name: '最低温',
		        data: eval(temp_low),
		    }]
		});
		},'json')
	})
	

</script>